<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3859121" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d5;</span>
                <div class="name">公告</div>
                <div class="code-name">&amp;#xf5d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d6;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xf5d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d7;</span>
                <div class="name">待派单</div>
                <div class="code-name">&amp;#xf5d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d8;</span>
                <div class="name">待接单</div>
                <div class="code-name">&amp;#xf5d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5db;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xf5db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5dc;</span>
                <div class="name">待发货</div>
                <div class="code-name">&amp;#xf5dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5dd;</span>
                <div class="name">售后</div>
                <div class="code-name">&amp;#xf5dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5de;</span>
                <div class="name">个人资料</div>
                <div class="code-name">&amp;#xf5de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5df;</span>
                <div class="name">会员卡</div>
                <div class="code-name">&amp;#xf5df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e0;</span>
                <div class="name">关税</div>
                <div class="code-name">&amp;#xf5e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e1;</span>
                <div class="name">积分</div>
                <div class="code-name">&amp;#xf5e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e2;</span>
                <div class="name">快退</div>
                <div class="code-name">&amp;#xf5e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e3;</span>
                <div class="name">快进</div>
                <div class="code-name">&amp;#xf5e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e4;</span>
                <div class="name">投资</div>
                <div class="code-name">&amp;#xf5e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e5;</span>
                <div class="name">盈利</div>
                <div class="code-name">&amp;#xf5e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e6;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xf5e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e7;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xf5e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e8;</span>
                <div class="name">风险查询</div>
                <div class="code-name">&amp;#xf5e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5e9;</span>
                <div class="name">文件导出</div>
                <div class="code-name">&amp;#xf5e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ea;</span>
                <div class="name">登记</div>
                <div class="code-name">&amp;#xf5ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5eb;</span>
                <div class="name">手机支付</div>
                <div class="code-name">&amp;#xf5eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ec;</span>
                <div class="name">运输</div>
                <div class="code-name">&amp;#xf5ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ed;</span>
                <div class="name">会议</div>
                <div class="code-name">&amp;#xf5ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ee;</span>
                <div class="name">报告</div>
                <div class="code-name">&amp;#xf5ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ef;</span>
                <div class="name">资料分享</div>
                <div class="code-name">&amp;#xf5ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5f0;</span>
                <div class="name">对账</div>
                <div class="code-name">&amp;#xf5f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5f1;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xf5f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5f2;</span>
                <div class="name">商家入驻</div>
                <div class="code-name">&amp;#xf5f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5f3;</span>
                <div class="name">日志</div>
                <div class="code-name">&amp;#xf5f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5f4;</span>
                <div class="name">绘画</div>
                <div class="code-name">&amp;#xf5f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5f5;</span>
                <div class="name">存储</div>
                <div class="code-name">&amp;#xf5f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf62e;</span>
                <div class="name">01_06</div>
                <div class="code-name">&amp;#xf62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf810;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xf810;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf811;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xf811;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf812;</span>
                <div class="name">个人资料</div>
                <div class="code-name">&amp;#xf812;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf813;</span>
                <div class="name">发现</div>
                <div class="code-name">&amp;#xf813;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc15;</span>
                <div class="name">@我</div>
                <div class="code-name">&amp;#xfc15;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc16;</span>
                <div class="name">参与话题</div>
                <div class="code-name">&amp;#xfc16;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc17;</span>
                <div class="name">房产信息</div>
                <div class="code-name">&amp;#xfc17;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc18;</span>
                <div class="name">关注</div>
                <div class="code-name">&amp;#xfc18;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc19;</span>
                <div class="name">交友</div>
                <div class="code-name">&amp;#xfc19;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc1a;</span>
                <div class="name">聊吧</div>
                <div class="code-name">&amp;#xfc1a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc1b;</span>
                <div class="name">聊天申请</div>
                <div class="code-name">&amp;#xfc1b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc1c;</span>
                <div class="name">匹配</div>
                <div class="code-name">&amp;#xfc1c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc1d;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xfc1d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc1e;</span>
                <div class="name">我的认证</div>
                <div class="code-name">&amp;#xfc1e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc1f;</span>
                <div class="name">邂逅</div>
                <div class="code-name">&amp;#xfc1f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xfc20;</span>
                <div class="name">办公</div>
                <div class="code-name">&amp;#xfc20;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4cf;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xf4cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d0;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xf4d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d3;</span>
                <div class="name">打卡</div>
                <div class="code-name">&amp;#xf4d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d4;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xf4d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d5;</span>
                <div class="name">打印</div>
                <div class="code-name">&amp;#xf4d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d6;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xf4d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d7;</span>
                <div class="name">待处理</div>
                <div class="code-name">&amp;#xf4d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d8;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xf4d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4d9;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xf4d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4db;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xf4db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4dc;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xf4dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4dd;</span>
                <div class="name">订单编辑</div>
                <div class="code-name">&amp;#xf4dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4de;</span>
                <div class="name">订单查询</div>
                <div class="code-name">&amp;#xf4de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4df;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xf4df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e0;</span>
                <div class="name">房源</div>
                <div class="code-name">&amp;#xf4e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e1;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xf4e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e2;</span>
                <div class="name">概率</div>
                <div class="code-name">&amp;#xf4e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e3;</span>
                <div class="name">个人设置</div>
                <div class="code-name">&amp;#xf4e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e4;</span>
                <div class="name">攻略</div>
                <div class="code-name">&amp;#xf4e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e5;</span>
                <div class="name">合作</div>
                <div class="code-name">&amp;#xf4e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e6;</span>
                <div class="name">红包</div>
                <div class="code-name">&amp;#xf4e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e7;</span>
                <div class="name">计划</div>
                <div class="code-name">&amp;#xf4e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e8;</span>
                <div class="name">教学</div>
                <div class="code-name">&amp;#xf4e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4e9;</span>
                <div class="name">礼品</div>
                <div class="code-name">&amp;#xf4e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4ea;</span>
                <div class="name">录像</div>
                <div class="code-name">&amp;#xf4ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4eb;</span>
                <div class="name">拍照</div>
                <div class="code-name">&amp;#xf4eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4ec;</span>
                <div class="name">平台</div>
                <div class="code-name">&amp;#xf4ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4ed;</span>
                <div class="name">钱包</div>
                <div class="code-name">&amp;#xf4ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4ee;</span>
                <div class="name">切换</div>
                <div class="code-name">&amp;#xf4ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4ef;</span>
                <div class="name">任务</div>
                <div class="code-name">&amp;#xf4ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f0;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xf4f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f1;</span>
                <div class="name">日志</div>
                <div class="code-name">&amp;#xf4f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f2;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xf4f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f3;</span>
                <div class="name">商品</div>
                <div class="code-name">&amp;#xf4f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f4;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xf4f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f5;</span>
                <div class="name">审核成功</div>
                <div class="code-name">&amp;#xf4f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f6;</span>
                <div class="name">审核失败</div>
                <div class="code-name">&amp;#xf4f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f7;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xf4f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f8;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xf4f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4f9;</span>
                <div class="name">说明</div>
                <div class="code-name">&amp;#xf4f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4fa;</span>
                <div class="name">提现</div>
                <div class="code-name">&amp;#xf4fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4fb;</span>
                <div class="name">通告</div>
                <div class="code-name">&amp;#xf4fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4fc;</span>
                <div class="name">通讯录</div>
                <div class="code-name">&amp;#xf4fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4fd;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xf4fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4fe;</span>
                <div class="name">团队</div>
                <div class="code-name">&amp;#xf4fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf4ff;</span>
                <div class="name">文档</div>
                <div class="code-name">&amp;#xf4ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf500;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xf500;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf501;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xf501;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf502;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xf502;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf503;</span>
                <div class="name">信件</div>
                <div class="code-name">&amp;#xf503;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf504;</span>
                <div class="name">勋章</div>
                <div class="code-name">&amp;#xf504;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf505;</span>
                <div class="name">邀请</div>
                <div class="code-name">&amp;#xf505;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf506;</span>
                <div class="name">已读邮件</div>
                <div class="code-name">&amp;#xf506;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf507;</span>
                <div class="name">音乐</div>
                <div class="code-name">&amp;#xf507;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf508;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xf508;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf509;</span>
                <div class="name">邮件</div>
                <div class="code-name">&amp;#xf509;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf50a;</span>
                <div class="name">预约</div>
                <div class="code-name">&amp;#xf50a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf50b;</span>
                <div class="name">指南</div>
                <div class="code-name">&amp;#xf50b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf50c;</span>
                <div class="name">注册</div>
                <div class="code-name">&amp;#xf50c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf50d;</span>
                <div class="name">注销</div>
                <div class="code-name">&amp;#xf50d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf50e;</span>
                <div class="name">资讯</div>
                <div class="code-name">&amp;#xf50e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf50f;</span>
                <div class="name">组队</div>
                <div class="code-name">&amp;#xf50f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf58e;</span>
                <div class="name">查看订单</div>
                <div class="code-name">&amp;#xf58e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf58f;</span>
                <div class="name">银行卡</div>
                <div class="code-name">&amp;#xf58f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf590;</span>
                <div class="name">投资</div>
                <div class="code-name">&amp;#xf590;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf591;</span>
                <div class="name">任务</div>
                <div class="code-name">&amp;#xf591;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf592;</span>
                <div class="name">维修</div>
                <div class="code-name">&amp;#xf592;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf593;</span>
                <div class="name">存款</div>
                <div class="code-name">&amp;#xf593;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf596;</span>
                <div class="name">员工管理</div>
                <div class="code-name">&amp;#xf596;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf597;</span>
                <div class="name">待付款</div>
                <div class="code-name">&amp;#xf597;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf598;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xf598;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf599;</span>
                <div class="name">闹钟</div>
                <div class="code-name">&amp;#xf599;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf59a;</span>
                <div class="name">余额</div>
                <div class="code-name">&amp;#xf59a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf59b;</span>
                <div class="name">相册</div>
                <div class="code-name">&amp;#xf59b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf59d;</span>
                <div class="name">抵扣券</div>
                <div class="code-name">&amp;#xf59d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf59f;</span>
                <div class="name">权益</div>
                <div class="code-name">&amp;#xf59f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a0;</span>
                <div class="name">行政</div>
                <div class="code-name">&amp;#xf5a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a1;</span>
                <div class="name">企业管理</div>
                <div class="code-name">&amp;#xf5a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a2;</span>
                <div class="name">上传文件</div>
                <div class="code-name">&amp;#xf5a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a3;</span>
                <div class="name">删除文件</div>
                <div class="code-name">&amp;#xf5a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a4;</span>
                <div class="name">天气</div>
                <div class="code-name">&amp;#xf5a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a5;</span>
                <div class="name">文档</div>
                <div class="code-name">&amp;#xf5a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a6;</span>
                <div class="name">风险查询</div>
                <div class="code-name">&amp;#xf5a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a7;</span>
                <div class="name">秒杀</div>
                <div class="code-name">&amp;#xf5a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a8;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xf5a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5a9;</span>
                <div class="name">打车</div>
                <div class="code-name">&amp;#xf5a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5aa;</span>
                <div class="name">咖啡</div>
                <div class="code-name">&amp;#xf5aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ab;</span>
                <div class="name">粘贴</div>
                <div class="code-name">&amp;#xf5ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ac;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xf5ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ad;</span>
                <div class="name">解锁</div>
                <div class="code-name">&amp;#xf5ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ae;</span>
                <div class="name">系统设置</div>
                <div class="code-name">&amp;#xf5ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5af;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xf5af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b0;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xf5b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b1;</span>
                <div class="name">报销</div>
                <div class="code-name">&amp;#xf5b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b2;</span>
                <div class="name">离职</div>
                <div class="code-name">&amp;#xf5b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b3;</span>
                <div class="name">入职</div>
                <div class="code-name">&amp;#xf5b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b5;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xf5b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b6;</span>
                <div class="name">考勤申诉</div>
                <div class="code-name">&amp;#xf5b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b7;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xf5b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b8;</span>
                <div class="name">账户</div>
                <div class="code-name">&amp;#xf5b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5b9;</span>
                <div class="name">对账</div>
                <div class="code-name">&amp;#xf5b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ba;</span>
                <div class="name">二手车</div>
                <div class="code-name">&amp;#xf5ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5bb;</span>
                <div class="name">选项</div>
                <div class="code-name">&amp;#xf5bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5bc;</span>
                <div class="name">资讯</div>
                <div class="code-name">&amp;#xf5bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5bd;</span>
                <div class="name">关联</div>
                <div class="code-name">&amp;#xf5bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5be;</span>
                <div class="name">汇率</div>
                <div class="code-name">&amp;#xf5be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5bf;</span>
                <div class="name">角色管理</div>
                <div class="code-name">&amp;#xf5bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c0;</span>
                <div class="name">报告</div>
                <div class="code-name">&amp;#xf5c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c1;</span>
                <div class="name">攻略</div>
                <div class="code-name">&amp;#xf5c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c2;</span>
                <div class="name">我们</div>
                <div class="code-name">&amp;#xf5c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c3;</span>
                <div class="name">音量</div>
                <div class="code-name">&amp;#xf5c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c4;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xf5c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c5;</span>
                <div class="name">调休</div>
                <div class="code-name">&amp;#xf5c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c6;</span>
                <div class="name">加班</div>
                <div class="code-name">&amp;#xf5c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c8;</span>
                <div class="name">请假</div>
                <div class="code-name">&amp;#xf5c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5c9;</span>
                <div class="name">文档</div>
                <div class="code-name">&amp;#xf5c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ca;</span>
                <div class="name">备份</div>
                <div class="code-name">&amp;#xf5ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5cb;</span>
                <div class="name">便签</div>
                <div class="code-name">&amp;#xf5cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5cc;</span>
                <div class="name">卡包</div>
                <div class="code-name">&amp;#xf5cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5cd;</span>
                <div class="name">待办</div>
                <div class="code-name">&amp;#xf5cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5ce;</span>
                <div class="name">充值</div>
                <div class="code-name">&amp;#xf5ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5cf;</span>
                <div class="name">饮料</div>
                <div class="code-name">&amp;#xf5cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d0;</span>
                <div class="name">公文包</div>
                <div class="code-name">&amp;#xf5d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d1;</span>
                <div class="name">观影纪录</div>
                <div class="code-name">&amp;#xf5d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d2;</span>
                <div class="name">摄像头</div>
                <div class="code-name">&amp;#xf5d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d3;</span>
                <div class="name">影音</div>
                <div class="code-name">&amp;#xf5d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf5d4;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xf5d4;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1673355813058') format('woff2'),
       url('iconfont.woff?t=1673355813058') format('woff'),
       url('iconfont.ttf?t=1673355813058') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-gonggao"></span>
            <div class="name">
              公告
            </div>
            <div class="code-name">.icon-gonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiankong"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-jiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daipaidan"></span>
            <div class="name">
              待派单
            </div>
            <div class="code-name">.icon-daipaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daijiedan"></span>
            <div class="name">
              待接单
            </div>
            <div class="code-name">.icon-daijiedan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daifahuo"></span>
            <div class="name">
              待发货
            </div>
            <div class="code-name">.icon-daifahuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouhou"></span>
            <div class="name">
              售后
            </div>
            <div class="code-name">.icon-shouhou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenziliao"></span>
            <div class="name">
              个人资料
            </div>
            <div class="code-name">.icon-gerenziliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuanka"></span>
            <div class="name">
              会员卡
            </div>
            <div class="code-name">.icon-huiyuanka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanshui"></span>
            <div class="name">
              关税
            </div>
            <div class="code-name">.icon-guanshui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen"></span>
            <div class="name">
              积分
            </div>
            <div class="code-name">.icon-jifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaitui"></span>
            <div class="name">
              快退
            </div>
            <div class="code-name">.icon-kuaitui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaijin"></span>
            <div class="name">
              快进
            </div>
            <div class="code-name">.icon-kuaijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-touzi1"></span>
            <div class="name">
              投资
            </div>
            <div class="code-name">.icon-touzi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingli"></span>
            <div class="name">
              盈利
            </div>
            <div class="code-name">.icon-yingli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiankong1"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-jiankong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxianchaxun1"></span>
            <div class="name">
              风险查询
            </div>
            <div class="code-name">.icon-fengxianchaxun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjiandaochu"></span>
            <div class="name">
              文件导出
            </div>
            <div class="code-name">.icon-wenjiandaochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dengji"></span>
            <div class="name">
              登记
            </div>
            <div class="code-name">.icon-dengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoujizhifu"></span>
            <div class="name">
              手机支付
            </div>
            <div class="code-name">.icon-shoujizhifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunshu"></span>
            <div class="name">
              运输
            </div>
            <div class="code-name">.icon-yunshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyi"></span>
            <div class="name">
              会议
            </div>
            <div class="code-name">.icon-huiyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baogao1"></span>
            <div class="name">
              报告
            </div>
            <div class="code-name">.icon-baogao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziliaofenxiang"></span>
            <div class="name">
              资料分享
            </div>
            <div class="code-name">.icon-ziliaofenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duizhang-96"></span>
            <div class="name">
              对账
            </div>
            <div class="code-name">.icon-duizhang-96
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.icon-yuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiaruzhu"></span>
            <div class="name">
              商家入驻
            </div>
            <div class="code-name">.icon-shangjiaruzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rizhi1"></span>
            <div class="name">
              日志
            </div>
            <div class="code-name">.icon-rizhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huihua"></span>
            <div class="name">
              绘画
            </div>
            <div class="code-name">.icon-huihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cunchu"></span>
            <div class="name">
              存储
            </div>
            <div class="code-name">.icon-cunchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-01_06"></span>
            <div class="name">
              01_06
            </div>
            <div class="code-name">.icon-01_06
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenziliao1"></span>
            <div class="name">
              个人资料
            </div>
            <div class="code-name">.icon-gerenziliao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-faxian"></span>
            <div class="name">
              发现
            </div>
            <div class="code-name">.icon-faxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-wo"></span>
            <div class="name">
              @我
            </div>
            <div class="code-name">.icon-a-wo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canyuhuati"></span>
            <div class="name">
              参与话题
            </div>
            <div class="code-name">.icon-canyuhuati
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangchanxinxi"></span>
            <div class="name">
              房产信息
            </div>
            <div class="code-name">.icon-fangchanxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanzhu"></span>
            <div class="name">
              关注
            </div>
            <div class="code-name">.icon-guanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoyou"></span>
            <div class="name">
              交友
            </div>
            <div class="code-name">.icon-jiaoyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liaoba"></span>
            <div class="name">
              聊吧
            </div>
            <div class="code-name">.icon-liaoba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liaotianshenqing"></span>
            <div class="name">
              聊天申请
            </div>
            <div class="code-name">.icon-liaotianshenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pipei"></span>
            <div class="name">
              匹配
            </div>
            <div class="code-name">.icon-pipei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinglun-08"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.icon-pinglun-08
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-woderenzheng"></span>
            <div class="name">
              我的认证
            </div>
            <div class="code-name">.icon-woderenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiehou"></span>
            <div class="name">
              邂逅
            </div>
            <div class="code-name">.icon-xiehou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangong"></span>
            <div class="name">
              办公
            </div>
            <div class="code-name">.icon-bangong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aixin"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.icon-aixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daka"></span>
            <div class="name">
              打卡
            </div>
            <div class="code-name">.icon-daka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dayin"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.icon-dayin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqian"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.icon-biaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daichuli"></span>
            <div class="name">
              待处理
            </div>
            <div class="code-name">.icon-daichuli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-ditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianpu"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-dianpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdanbianji"></span>
            <div class="name">
              订单编辑
            </div>
            <div class="code-name">.icon-dingdanbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdanchaxun"></span>
            <div class="name">
              订单查询
            </div>
            <div class="code-name">.icon-dingdanchaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingwei"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icon-dingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangyuan"></span>
            <div class="name">
              房源
            </div>
            <div class="code-name">.icon-fangyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.icon-fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaishuai"></span>
            <div class="name">
              概率
            </div>
            <div class="code-name">.icon-gaishuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenshezhi"></span>
            <div class="name">
              个人设置
            </div>
            <div class="code-name">.icon-gerenshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gonglve"></span>
            <div class="name">
              攻略
            </div>
            <div class="code-name">.icon-gonglve
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hezuo"></span>
            <div class="name">
              合作
            </div>
            <div class="code-name">.icon-hezuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hongbao"></span>
            <div class="name">
              红包
            </div>
            <div class="code-name">.icon-hongbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jihua"></span>
            <div class="name">
              计划
            </div>
            <div class="code-name">.icon-jihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoxue"></span>
            <div class="name">
              教学
            </div>
            <div class="code-name">.icon-jiaoxue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lipin"></span>
            <div class="name">
              礼品
            </div>
            <div class="code-name">.icon-lipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luxiang"></span>
            <div class="name">
              录像
            </div>
            <div class="code-name">.icon-luxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paizhao"></span>
            <div class="name">
              拍照
            </div>
            <div class="code-name">.icon-paizhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pingtai"></span>
            <div class="name">
              平台
            </div>
            <div class="code-name">.icon-pingtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianbao"></span>
            <div class="name">
              钱包
            </div>
            <div class="code-name">.icon-qianbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuan"></span>
            <div class="name">
              切换
            </div>
            <div class="code-name">.icon-qiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renwu"></span>
            <div class="name">
              任务
            </div>
            <div class="code-name">.icon-renwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.icon-rili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rizhi"></span>
            <div class="name">
              日志
            </div>
            <div class="code-name">.icon-rizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangpin"></span>
            <div class="name">
              商品
            </div>
            <div class="code-name">.icon-shangpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenhechenggong"></span>
            <div class="name">
              审核成功
            </div>
            <div class="code-name">.icon-shenhechenggong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenheshibai"></span>
            <div class="name">
              审核失败
            </div>
            <div class="code-name">.icon-shenheshibai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuoming"></span>
            <div class="name">
              说明
            </div>
            <div class="code-name">.icon-shuoming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tixian"></span>
            <div class="name">
              提现
            </div>
            <div class="code-name">.icon-tixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tonggao"></span>
            <div class="name">
              通告
            </div>
            <div class="code-name">.icon-tonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongxunlu"></span>
            <div class="name">
              通讯录
            </div>
            <div class="code-name">.icon-tongxunlu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuandui"></span>
            <div class="name">
              团队
            </div>
            <div class="code-name">.icon-tuandui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendang"></span>
            <div class="name">
              文档
            </div>
            <div class="code-name">.icon-wendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.icon-wenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinjian"></span>
            <div class="name">
              信件
            </div>
            <div class="code-name">.icon-xinjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunzhang"></span>
            <div class="name">
              勋章
            </div>
            <div class="code-name">.icon-xunzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yaoqing"></span>
            <div class="name">
              邀请
            </div>
            <div class="code-name">.icon-yaoqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiduyoujian"></span>
            <div class="name">
              已读邮件
            </div>
            <div class="code-name">.icon-yiduyoujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinle"></span>
            <div class="name">
              音乐
            </div>
            <div class="code-name">.icon-yinle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youhuiquan"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.icon-youhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjian"></span>
            <div class="name">
              邮件
            </div>
            <div class="code-name">.icon-youjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyue"></span>
            <div class="name">
              预约
            </div>
            <div class="code-name">.icon-yuyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhinan"></span>
            <div class="name">
              指南
            </div>
            <div class="code-name">.icon-zhinan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuce"></span>
            <div class="name">
              注册
            </div>
            <div class="code-name">.icon-zhuce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuxiao"></span>
            <div class="name">
              注销
            </div>
            <div class="code-name">.icon-zhuxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixun"></span>
            <div class="name">
              资讯
            </div>
            <div class="code-name">.icon-zixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zudui"></span>
            <div class="name">
              组队
            </div>
            <div class="code-name">.icon-zudui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chakandingdan"></span>
            <div class="name">
              查看订单
            </div>
            <div class="code-name">.icon-chakandingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinhangka"></span>
            <div class="name">
              银行卡
            </div>
            <div class="code-name">.icon-yinhangka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-touzi-03"></span>
            <div class="name">
              投资
            </div>
            <div class="code-name">.icon-touzi-03
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renwu1"></span>
            <div class="name">
              任务
            </div>
            <div class="code-name">.icon-renwu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixiu"></span>
            <div class="name">
              维修
            </div>
            <div class="code-name">.icon-weixiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cunkuan"></span>
            <div class="name">
              存款
            </div>
            <div class="code-name">.icon-cunkuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuangongguanli"></span>
            <div class="name">
              员工管理
            </div>
            <div class="code-name">.icon-yuangongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daifukuan"></span>
            <div class="name">
              待付款
            </div>
            <div class="code-name">.icon-daifukuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-naozhong"></span>
            <div class="name">
              闹钟
            </div>
            <div class="code-name">.icon-naozhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yue"></span>
            <div class="name">
              余额
            </div>
            <div class="code-name">.icon-yue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daichuli1"></span>
            <div class="name">
              相册
            </div>
            <div class="code-name">.icon-daichuli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dikouquan"></span>
            <div class="name">
              抵扣券
            </div>
            <div class="code-name">.icon-dikouquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanyi"></span>
            <div class="name">
              权益
            </div>
            <div class="code-name">.icon-quanyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuandui1"></span>
            <div class="name">
              行政
            </div>
            <div class="code-name">.icon-tuandui1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiyeguanli"></span>
            <div class="name">
              企业管理
            </div>
            <div class="code-name">.icon-qiyeguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuanwenjian"></span>
            <div class="name">
              上传文件
            </div>
            <div class="code-name">.icon-shangchuanwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchuwenjian"></span>
            <div class="name">
              删除文件
            </div>
            <div class="code-name">.icon-shanchuwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianqi"></span>
            <div class="name">
              天气
            </div>
            <div class="code-name">.icon-tianqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendang1"></span>
            <div class="name">
              文档
            </div>
            <div class="code-name">.icon-wendang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxianchaxun"></span>
            <div class="name">
              风险查询
            </div>
            <div class="code-name">.icon-fengxianchaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-miaosha"></span>
            <div class="name">
              秒杀
            </div>
            <div class="code-name">.icon-miaosha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian1"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dache"></span>
            <div class="name">
              打车
            </div>
            <div class="code-name">.icon-dache
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kafei"></span>
            <div class="name">
              咖啡
            </div>
            <div class="code-name">.icon-kafei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-niantie"></span>
            <div class="name">
              粘贴
            </div>
            <div class="code-name">.icon-niantie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuo"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">.icon-jiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitongshezhi"></span>
            <div class="name">
              系统设置
            </div>
            <div class="code-name">.icon-xitongshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang1"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.icon-pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoxiao"></span>
            <div class="name">
              报销
            </div>
            <div class="code-name">.icon-baoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lizhi"></span>
            <div class="name">
              离职
            </div>
            <div class="code-name">.icon-lizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ruzhi"></span>
            <div class="name">
              入职
            </div>
            <div class="code-name">.icon-ruzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaoqinshensu"></span>
            <div class="name">
              考勤申诉
            </div>
            <div class="code-name">.icon-kaoqinshensu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhanghu"></span>
            <div class="name">
              账户
            </div>
            <div class="code-name">.icon-zhanghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duizhang-39"></span>
            <div class="name">
              对账
            </div>
            <div class="code-name">.icon-duizhang-39
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ershouche"></span>
            <div class="name">
              二手车
            </div>
            <div class="code-name">.icon-ershouche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanxiang"></span>
            <div class="name">
              选项
            </div>
            <div class="code-name">.icon-xuanxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixun1"></span>
            <div class="name">
              资讯
            </div>
            <div class="code-name">.icon-zixun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanlian"></span>
            <div class="name">
              关联
            </div>
            <div class="code-name">.icon-guanlian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huishuai"></span>
            <div class="name">
              汇率
            </div>
            <div class="code-name">.icon-huishuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoseguanli"></span>
            <div class="name">
              角色管理
            </div>
            <div class="code-name">.icon-jiaoseguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baogao"></span>
            <div class="name">
              报告
            </div>
            <div class="code-name">.icon-baogao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gonglve1"></span>
            <div class="name">
              攻略
            </div>
            <div class="code-name">.icon-gonglve1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-women"></span>
            <div class="name">
              我们
            </div>
            <div class="code-name">.icon-women
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinliang"></span>
            <div class="name">
              音量
            </div>
            <div class="code-name">.icon-yinliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingwei1"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icon-dingwei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiaoxiu"></span>
            <div class="name">
              调休
            </div>
            <div class="code-name">.icon-tiaoxiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaban"></span>
            <div class="name">
              加班
            </div>
            <div class="code-name">.icon-jiaban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingjia"></span>
            <div class="name">
              请假
            </div>
            <div class="code-name">.icon-qingjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendang11"></span>
            <div class="name">
              文档
            </div>
            <div class="code-name">.icon-wendang11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-beifen"></span>
            <div class="name">
              备份
            </div>
            <div class="code-name">.icon-beifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianqian"></span>
            <div class="name">
              便签
            </div>
            <div class="code-name">.icon-bianqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kabao"></span>
            <div class="name">
              卡包
            </div>
            <div class="code-name">.icon-kabao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daiban"></span>
            <div class="name">
              待办
            </div>
            <div class="code-name">.icon-daiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongzhi"></span>
            <div class="name">
              充值
            </div>
            <div class="code-name">.icon-chongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinliao"></span>
            <div class="name">
              饮料
            </div>
            <div class="code-name">.icon-yinliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongwenbao"></span>
            <div class="name">
              公文包
            </div>
            <div class="code-name">.icon-gongwenbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanyingjilu"></span>
            <div class="name">
              观影纪录
            </div>
            <div class="code-name">.icon-guanyingjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shexiangtou"></span>
            <div class="name">
              摄像头
            </div>
            <div class="code-name">.icon-shexiangtou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingyin"></span>
            <div class="name">
              影音
            </div>
            <div class="code-name">.icon-yingyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gonggao"></use>
                </svg>
                <div class="name">公告</div>
                <div class="code-name">#icon-gonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiankong"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-jiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daipaidan"></use>
                </svg>
                <div class="name">待派单</div>
                <div class="code-name">#icon-daipaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daijiedan"></use>
                </svg>
                <div class="name">待接单</div>
                <div class="code-name">#icon-daijiedan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daifahuo"></use>
                </svg>
                <div class="name">待发货</div>
                <div class="code-name">#icon-daifahuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouhou"></use>
                </svg>
                <div class="name">售后</div>
                <div class="code-name">#icon-shouhou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenziliao"></use>
                </svg>
                <div class="name">个人资料</div>
                <div class="code-name">#icon-gerenziliao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuanka"></use>
                </svg>
                <div class="name">会员卡</div>
                <div class="code-name">#icon-huiyuanka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanshui"></use>
                </svg>
                <div class="name">关税</div>
                <div class="code-name">#icon-guanshui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen"></use>
                </svg>
                <div class="name">积分</div>
                <div class="code-name">#icon-jifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaitui"></use>
                </svg>
                <div class="name">快退</div>
                <div class="code-name">#icon-kuaitui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaijin"></use>
                </svg>
                <div class="name">快进</div>
                <div class="code-name">#icon-kuaijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-touzi1"></use>
                </svg>
                <div class="name">投资</div>
                <div class="code-name">#icon-touzi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingli"></use>
                </svg>
                <div class="name">盈利</div>
                <div class="code-name">#icon-yingli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiankong1"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-jiankong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxianchaxun1"></use>
                </svg>
                <div class="name">风险查询</div>
                <div class="code-name">#icon-fengxianchaxun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjiandaochu"></use>
                </svg>
                <div class="name">文件导出</div>
                <div class="code-name">#icon-wenjiandaochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dengji"></use>
                </svg>
                <div class="name">登记</div>
                <div class="code-name">#icon-dengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoujizhifu"></use>
                </svg>
                <div class="name">手机支付</div>
                <div class="code-name">#icon-shoujizhifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunshu"></use>
                </svg>
                <div class="name">运输</div>
                <div class="code-name">#icon-yunshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyi"></use>
                </svg>
                <div class="name">会议</div>
                <div class="code-name">#icon-huiyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baogao1"></use>
                </svg>
                <div class="name">报告</div>
                <div class="code-name">#icon-baogao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziliaofenxiang"></use>
                </svg>
                <div class="name">资料分享</div>
                <div class="code-name">#icon-ziliaofenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duizhang-96"></use>
                </svg>
                <div class="name">对账</div>
                <div class="code-name">#icon-duizhang-96</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#icon-yuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiaruzhu"></use>
                </svg>
                <div class="name">商家入驻</div>
                <div class="code-name">#icon-shangjiaruzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rizhi1"></use>
                </svg>
                <div class="name">日志</div>
                <div class="code-name">#icon-rizhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huihua"></use>
                </svg>
                <div class="name">绘画</div>
                <div class="code-name">#icon-huihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cunchu"></use>
                </svg>
                <div class="name">存储</div>
                <div class="code-name">#icon-cunchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-01_06"></use>
                </svg>
                <div class="name">01_06</div>
                <div class="code-name">#icon-01_06</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenziliao1"></use>
                </svg>
                <div class="name">个人资料</div>
                <div class="code-name">#icon-gerenziliao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-faxian"></use>
                </svg>
                <div class="name">发现</div>
                <div class="code-name">#icon-faxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-wo"></use>
                </svg>
                <div class="name">@我</div>
                <div class="code-name">#icon-a-wo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-canyuhuati"></use>
                </svg>
                <div class="name">参与话题</div>
                <div class="code-name">#icon-canyuhuati</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangchanxinxi"></use>
                </svg>
                <div class="name">房产信息</div>
                <div class="code-name">#icon-fangchanxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanzhu"></use>
                </svg>
                <div class="name">关注</div>
                <div class="code-name">#icon-guanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoyou"></use>
                </svg>
                <div class="name">交友</div>
                <div class="code-name">#icon-jiaoyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liaoba"></use>
                </svg>
                <div class="name">聊吧</div>
                <div class="code-name">#icon-liaoba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liaotianshenqing"></use>
                </svg>
                <div class="name">聊天申请</div>
                <div class="code-name">#icon-liaotianshenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pipei"></use>
                </svg>
                <div class="name">匹配</div>
                <div class="code-name">#icon-pipei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun-08"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#icon-pinglun-08</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-woderenzheng"></use>
                </svg>
                <div class="name">我的认证</div>
                <div class="code-name">#icon-woderenzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiehou"></use>
                </svg>
                <div class="name">邂逅</div>
                <div class="code-name">#icon-xiehou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangong"></use>
                </svg>
                <div class="name">办公</div>
                <div class="code-name">#icon-bangong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aixin"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#icon-aixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daka"></use>
                </svg>
                <div class="name">打卡</div>
                <div class="code-name">#icon-daka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dayin"></use>
                </svg>
                <div class="name">打印</div>
                <div class="code-name">#icon-dayin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqian"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#icon-biaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daichuli"></use>
                </svg>
                <div class="name">待处理</div>
                <div class="code-name">#icon-daichuli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-ditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianpu"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-dianpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdanbianji"></use>
                </svg>
                <div class="name">订单编辑</div>
                <div class="code-name">#icon-dingdanbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdanchaxun"></use>
                </svg>
                <div class="name">订单查询</div>
                <div class="code-name">#icon-dingdanchaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingwei"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icon-dingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangyuan"></use>
                </svg>
                <div class="name">房源</div>
                <div class="code-name">#icon-fangyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#icon-fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaishuai"></use>
                </svg>
                <div class="name">概率</div>
                <div class="code-name">#icon-gaishuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenshezhi"></use>
                </svg>
                <div class="name">个人设置</div>
                <div class="code-name">#icon-gerenshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gonglve"></use>
                </svg>
                <div class="name">攻略</div>
                <div class="code-name">#icon-gonglve</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hezuo"></use>
                </svg>
                <div class="name">合作</div>
                <div class="code-name">#icon-hezuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hongbao"></use>
                </svg>
                <div class="name">红包</div>
                <div class="code-name">#icon-hongbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jihua"></use>
                </svg>
                <div class="name">计划</div>
                <div class="code-name">#icon-jihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoxue"></use>
                </svg>
                <div class="name">教学</div>
                <div class="code-name">#icon-jiaoxue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lipin"></use>
                </svg>
                <div class="name">礼品</div>
                <div class="code-name">#icon-lipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luxiang"></use>
                </svg>
                <div class="name">录像</div>
                <div class="code-name">#icon-luxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paizhao"></use>
                </svg>
                <div class="name">拍照</div>
                <div class="code-name">#icon-paizhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pingtai"></use>
                </svg>
                <div class="name">平台</div>
                <div class="code-name">#icon-pingtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianbao"></use>
                </svg>
                <div class="name">钱包</div>
                <div class="code-name">#icon-qianbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuan"></use>
                </svg>
                <div class="name">切换</div>
                <div class="code-name">#icon-qiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renwu"></use>
                </svg>
                <div class="name">任务</div>
                <div class="code-name">#icon-renwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#icon-rili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rizhi"></use>
                </svg>
                <div class="name">日志</div>
                <div class="code-name">#icon-rizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangpin"></use>
                </svg>
                <div class="name">商品</div>
                <div class="code-name">#icon-shangpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenhechenggong"></use>
                </svg>
                <div class="name">审核成功</div>
                <div class="code-name">#icon-shenhechenggong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenheshibai"></use>
                </svg>
                <div class="name">审核失败</div>
                <div class="code-name">#icon-shenheshibai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuoming"></use>
                </svg>
                <div class="name">说明</div>
                <div class="code-name">#icon-shuoming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tixian"></use>
                </svg>
                <div class="name">提现</div>
                <div class="code-name">#icon-tixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tonggao"></use>
                </svg>
                <div class="name">通告</div>
                <div class="code-name">#icon-tonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongxunlu"></use>
                </svg>
                <div class="name">通讯录</div>
                <div class="code-name">#icon-tongxunlu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuandui"></use>
                </svg>
                <div class="name">团队</div>
                <div class="code-name">#icon-tuandui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang"></use>
                </svg>
                <div class="name">文档</div>
                <div class="code-name">#icon-wendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#icon-wenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinjian"></use>
                </svg>
                <div class="name">信件</div>
                <div class="code-name">#icon-xinjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunzhang"></use>
                </svg>
                <div class="name">勋章</div>
                <div class="code-name">#icon-xunzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yaoqing"></use>
                </svg>
                <div class="name">邀请</div>
                <div class="code-name">#icon-yaoqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiduyoujian"></use>
                </svg>
                <div class="name">已读邮件</div>
                <div class="code-name">#icon-yiduyoujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinle"></use>
                </svg>
                <div class="name">音乐</div>
                <div class="code-name">#icon-yinle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youhuiquan"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#icon-youhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjian"></use>
                </svg>
                <div class="name">邮件</div>
                <div class="code-name">#icon-youjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyue"></use>
                </svg>
                <div class="name">预约</div>
                <div class="code-name">#icon-yuyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhinan"></use>
                </svg>
                <div class="name">指南</div>
                <div class="code-name">#icon-zhinan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuce"></use>
                </svg>
                <div class="name">注册</div>
                <div class="code-name">#icon-zhuce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuxiao"></use>
                </svg>
                <div class="name">注销</div>
                <div class="code-name">#icon-zhuxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixun"></use>
                </svg>
                <div class="name">资讯</div>
                <div class="code-name">#icon-zixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zudui"></use>
                </svg>
                <div class="name">组队</div>
                <div class="code-name">#icon-zudui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chakandingdan"></use>
                </svg>
                <div class="name">查看订单</div>
                <div class="code-name">#icon-chakandingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhangka"></use>
                </svg>
                <div class="name">银行卡</div>
                <div class="code-name">#icon-yinhangka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-touzi-03"></use>
                </svg>
                <div class="name">投资</div>
                <div class="code-name">#icon-touzi-03</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renwu1"></use>
                </svg>
                <div class="name">任务</div>
                <div class="code-name">#icon-renwu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixiu"></use>
                </svg>
                <div class="name">维修</div>
                <div class="code-name">#icon-weixiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cunkuan"></use>
                </svg>
                <div class="name">存款</div>
                <div class="code-name">#icon-cunkuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuangongguanli"></use>
                </svg>
                <div class="name">员工管理</div>
                <div class="code-name">#icon-yuangongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daifukuan"></use>
                </svg>
                <div class="name">待付款</div>
                <div class="code-name">#icon-daifukuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-naozhong"></use>
                </svg>
                <div class="name">闹钟</div>
                <div class="code-name">#icon-naozhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yue"></use>
                </svg>
                <div class="name">余额</div>
                <div class="code-name">#icon-yue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daichuli1"></use>
                </svg>
                <div class="name">相册</div>
                <div class="code-name">#icon-daichuli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dikouquan"></use>
                </svg>
                <div class="name">抵扣券</div>
                <div class="code-name">#icon-dikouquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanyi"></use>
                </svg>
                <div class="name">权益</div>
                <div class="code-name">#icon-quanyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuandui1"></use>
                </svg>
                <div class="name">行政</div>
                <div class="code-name">#icon-tuandui1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyeguanli"></use>
                </svg>
                <div class="name">企业管理</div>
                <div class="code-name">#icon-qiyeguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuanwenjian"></use>
                </svg>
                <div class="name">上传文件</div>
                <div class="code-name">#icon-shangchuanwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchuwenjian"></use>
                </svg>
                <div class="name">删除文件</div>
                <div class="code-name">#icon-shanchuwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianqi"></use>
                </svg>
                <div class="name">天气</div>
                <div class="code-name">#icon-tianqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang1"></use>
                </svg>
                <div class="name">文档</div>
                <div class="code-name">#icon-wendang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxianchaxun"></use>
                </svg>
                <div class="name">风险查询</div>
                <div class="code-name">#icon-fengxianchaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-miaosha"></use>
                </svg>
                <div class="name">秒杀</div>
                <div class="code-name">#icon-miaosha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian1"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dache"></use>
                </svg>
                <div class="name">打车</div>
                <div class="code-name">#icon-dache</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kafei"></use>
                </svg>
                <div class="name">咖啡</div>
                <div class="code-name">#icon-kafei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-niantie"></use>
                </svg>
                <div class="name">粘贴</div>
                <div class="code-name">#icon-niantie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuo"></use>
                </svg>
                <div class="name">解锁</div>
                <div class="code-name">#icon-jiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongshezhi"></use>
                </svg>
                <div class="name">系统设置</div>
                <div class="code-name">#icon-xitongshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#icon-pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoxiao"></use>
                </svg>
                <div class="name">报销</div>
                <div class="code-name">#icon-baoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lizhi"></use>
                </svg>
                <div class="name">离职</div>
                <div class="code-name">#icon-lizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ruzhi"></use>
                </svg>
                <div class="name">入职</div>
                <div class="code-name">#icon-ruzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaoqinshensu"></use>
                </svg>
                <div class="name">考勤申诉</div>
                <div class="code-name">#icon-kaoqinshensu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhanghu"></use>
                </svg>
                <div class="name">账户</div>
                <div class="code-name">#icon-zhanghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duizhang-39"></use>
                </svg>
                <div class="name">对账</div>
                <div class="code-name">#icon-duizhang-39</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ershouche"></use>
                </svg>
                <div class="name">二手车</div>
                <div class="code-name">#icon-ershouche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanxiang"></use>
                </svg>
                <div class="name">选项</div>
                <div class="code-name">#icon-xuanxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixun1"></use>
                </svg>
                <div class="name">资讯</div>
                <div class="code-name">#icon-zixun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanlian"></use>
                </svg>
                <div class="name">关联</div>
                <div class="code-name">#icon-guanlian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huishuai"></use>
                </svg>
                <div class="name">汇率</div>
                <div class="code-name">#icon-huishuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoseguanli"></use>
                </svg>
                <div class="name">角色管理</div>
                <div class="code-name">#icon-jiaoseguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baogao"></use>
                </svg>
                <div class="name">报告</div>
                <div class="code-name">#icon-baogao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gonglve1"></use>
                </svg>
                <div class="name">攻略</div>
                <div class="code-name">#icon-gonglve1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-women"></use>
                </svg>
                <div class="name">我们</div>
                <div class="code-name">#icon-women</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinliang"></use>
                </svg>
                <div class="name">音量</div>
                <div class="code-name">#icon-yinliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingwei1"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icon-dingwei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiaoxiu"></use>
                </svg>
                <div class="name">调休</div>
                <div class="code-name">#icon-tiaoxiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaban"></use>
                </svg>
                <div class="name">加班</div>
                <div class="code-name">#icon-jiaban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingjia"></use>
                </svg>
                <div class="name">请假</div>
                <div class="code-name">#icon-qingjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang11"></use>
                </svg>
                <div class="name">文档</div>
                <div class="code-name">#icon-wendang11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-beifen"></use>
                </svg>
                <div class="name">备份</div>
                <div class="code-name">#icon-beifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianqian"></use>
                </svg>
                <div class="name">便签</div>
                <div class="code-name">#icon-bianqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kabao"></use>
                </svg>
                <div class="name">卡包</div>
                <div class="code-name">#icon-kabao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daiban"></use>
                </svg>
                <div class="name">待办</div>
                <div class="code-name">#icon-daiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongzhi"></use>
                </svg>
                <div class="name">充值</div>
                <div class="code-name">#icon-chongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinliao"></use>
                </svg>
                <div class="name">饮料</div>
                <div class="code-name">#icon-yinliao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongwenbao"></use>
                </svg>
                <div class="name">公文包</div>
                <div class="code-name">#icon-gongwenbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanyingjilu"></use>
                </svg>
                <div class="name">观影纪录</div>
                <div class="code-name">#icon-guanyingjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shexiangtou"></use>
                </svg>
                <div class="name">摄像头</div>
                <div class="code-name">#icon-shexiangtou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingyin"></use>
                </svg>
                <div class="name">影音</div>
                <div class="code-name">#icon-yingyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
